<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :show-close="true"
      :append-to-body="true"
      :class="{'mobile-el-dialog mobile-el-dialog-form': showMobilePage}"
      :close-on-click-modal="false"
      class="global-dailog-style resource-dialog"
    >
      <div :style="{maxHeight: '80vh'}" class="body-form">
        <signInfo ref="signInfo" :model-data="modelData" :row-span="rowSpan" :is-signed="isSigned" :rule-parent-key="['handoverKey']" dialog/>
        <fixed-pagination style="width: 100%; padding: 0; margin: 0; border-radius: 0px 0px 8px 8px">
          <div class="center mobile-btn-group">
            <el-button :loading="loading" size="small" class="btn mobile-btn-flex" type="primary" @click.stop="handelOk">确定</el-button>
            <el-button size="small" class="btn cancel-btn-style" type="default" plain @click.stop="closeDialog">取消</el-button>
          </div>
        </fixed-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { editSignInfo } from '@/api/resource';
import signInfo from '../create/model/signInfo.vue';
import mixins from './mixins';

export default {
  components: { Title, signInfo },
  mixins: [mixins],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      modelData: {
      },
      editResourceForm: {
        id: '',
        signGroups: '',
        operatorId: [],
        executeBrokerId: '',
        signDate: '',
        cooperationTime: '',
        workWxCode: '',
        cooperationOption: '',
        dynamicKey: [],
        pointHighestRatio: '',
        followContractBrokerId: []
      },
      defaultData: {},
      isSigned: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    refs() {
      return ['signInfo'];
    }
  },
  methods: {
    openDialog(params) {
      const { data } = params || {};
      this.modelData = data;
      this.defaultData = _.cloneDeep(this.editResourceForm);
      this.getDynamic(this.modelData, ['handoverKey']);
      const { signEndDate, signStartDate, cooperationStart, cooperationEnd, operatorId } = data.additionalKey;
      this.$set(this.modelData.additionalKey, 'signDate', signStartDate ? [signStartDate, signEndDate] : []);
      this.$set(this.modelData.additionalKey, 'cooperationTime', cooperationStart ? [cooperationStart, cooperationEnd] : []);
      if (!operatorId) this.modelData.additionalKey.operatorId = [];
      this.isSigned = data.signStatus === 1; // 已签约
      this.dialogVisible = true;
    },
    async handelOk() {
      const valid = await this.validateForm().catch((err) => { console.log(err); });
      if (!valid) {
        this.$message.warning('请检查信息是否填写完整');
        return;
      }
      const params = this.editResourceForm;
      const additionalKey = this.modelData.additionalKey;
      Object.keys(params).forEach(key => {
        if (additionalKey[key] || additionalKey[key] === 0) {
          params[key] = additionalKey[key];
        }
      });
      const data = {
        signStartDate: params.signDate[0] || '',
        signEndDate: params.signDate[1] || '',
        cooperationStart: params.cooperationTime[0] || '',
        cooperationEnd: params.cooperationTime[1] || '',
        ...params,
        id: this.modelData.systemId
      };
      data.executeBrokerId = additionalKey.executeBrokerId ? additionalKey.executeBrokerId : '';
      data.followContractBrokerId = additionalKey.followContractBrokerId ? additionalKey.followContractBrokerId : '';
      delete data.signDate;
      delete data.cooperationTime;
      data.dynamicKey = this.modelData.handoverKey.dynamicKey;
      this.loading = true;
      editSignInfo(data).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.$message.success('修改成功');
          this.$emit('success');
        }
        this.closeDialog();
        this.$emit('getMediumData');
      }).catch(() => {
        this.loading = false;
      });
    },
    closeDialog() {
      this.dialogVisible = false;
      this.editResourceForm = this.defaultData;
    }
  }
};
</script>
<style lang="scss" scoped>
.width240-time {
  width: 240px;
}
.resource-dialog {
  ::v-deep {
    .el-dialog {
      width: 960px;
    }
    .el-dialog__body {
      padding: 6px 24px 24px 24px !important;
    }
  }
}
.body-form {
  padding-bottom: 50px;
  @include scrollBar($x: hidden, $y: auto, $width: 6px);
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
::v-deep {
  .dynamicKey-label {
    .el-form-item__label {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .el-form-item__error {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 240px;
    }
  }
}
.edit-btn-container {
  display: flex;
  justify-content: center;
}
</style>
